import React, { Component, createRef } from 'react'
// 非受控组件
// 定义: 非受控组件表单的值不受 state 数据的控制.
// 语法: 使用createRef 创建ref 对象, 然后给每一个元素dom绑定该对象
// 创建 ref 的两种方式
// 方式1 : 在constractor 构造器中定义ref
// 方式2: 直接以类成员属性的形式定义ref
export default class Father1 extends Component {
    constructor() {
        super()
        // this.ref1 = createRef();
        // //console.log(this.ref1);
        // this.ref2 = createRef();
        // this.ref3 = createRef()
        // this.ref4 = createRef()
    }
    ref1 = createRef();
    ref2 = createRef();
    ref3 = createRef();
    ref4 = createRef();
    ref5 = createRef();
    ref6 = createRef();
    ref7 = createRef();
    state = {
        username: '乔峰',
        sex: '女',
        selected: '北京',
        checkedArr: ['掉渣饼', '酸辣粉']
    }
    render() {
        //解构state
        const { username, sex, selected, checkedArr } = this.state
        return (
            <div>
                {/* 文本框 */}
                <p>
                    <input type='text' ref={this.ref1} defaultValue={username} />
                </p>
                {/* 单选框 */}
                <p>
                    <input type='radio'
                        name='sex'
                        value='男'
                        defaultChecked={'男' == sex}
                        ref={this.ref2}
                    />男
                    <input type='radio'
                        name='sex'
                        value='女'
                        defaultChecked={'女' == sex}
                        ref={this.ref3}
                    />女
                </p>
                {/* 下拉框 */}
                <select defaultValue={selected} ref={this.ref4} >
                    <option value='河北'>河北</option>
                    <option value='山西'>山西</option>
                    <option value='北京'>北京</option>
                </select>
                {/* 复选框 */}
                <p>
                    <input type='checkbox'
                        value='麻辣烫'
                        ref={this.ref5}
                        defaultChecked={checkedArr.includes('麻辣烫')}
                    />麻辣烫
                    <input type='checkbox'
                        value='酸辣粉'
                        ref={this.ref6}
                        defaultChecked={checkedArr.includes('酸辣粉')}
                    />酸辣粉
                    <input type='checkbox'
                        value='掉渣饼'
                        ref={this.ref7}
                        defaultChecked={checkedArr.includes('掉渣饼')}
                    />掉渣饼
                </p>
                {/* 提交表单 */}
                <p>
                    <button onClick={() => {
                        console.log('this.ref1', this.ref1.current.value)
                        // console.log('this.ref2', this.ref2.current)
                        // console.log('this.ref3', this.ref3.current)
                        let checkedRadios = [this.ref2.current, this.ref3.current];
                        checkedRadios.forEach(item => {
                            if (item.checked) {
                                console.log(item.value)
                            }
                        })
                        console.log(this.ref4.current.value)

                        let checkedBoxArr = [
                            this.ref5.current,
                            this.ref6.current,
                            this.ref7.current
                        ]
                        // 定义选中的复选框
                        let checkedArr = []
                        console.log(checkedBoxArr)
                        checkedBoxArr.forEach(item => {
                            if (item.checked) {
                                checkedArr.push(item.value)
                            }
                        })
                        console.log(checkedArr)
                    }}>提交表单</button>
                </p>
            </div>
        )
    }
}


